<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>市场数据分析</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <link rel="stylesheet" type="text/css" href="view/iwocar5/css/mycss.css" />
	<style>
    	#flow-time-form1{height:250px;}
        .form-border2{ padding-bottom: 10px; border:1px solid #949494; margin-top: 15px; position: relative;}
        .form-border2 .form-title{ top:0; left:5%; position:absolute;}
        .volume-from{ height:250px;}
        .graph-title.spec span:nth-child(2)::after{ background:#000;}
        .graph-title.spec span:nth-child(3)::after{ background:#434c53;}
        .graph-title.spec span:nth-child(5)::after{ background:#6d7578;}
        .graph-title.spec span:nth-child(6)::after{ background:#b1b6b9;}
        .graph-title.spec span:nth-child(7)::after{ background:#d5d9d8;}  
		.flow-time .form{
			border: 1px solid #949494;	
			margin-top: 15px;
		}			
	</style>
	<script src="view/iwocar5/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--    <div class="header">
        <h5>流量分析<i class="arrow_l1"></i><em class="arrow_l2"></em></h5>
    </div>-->
		<div class="store-title-add">
        <h3 class="pub-title">
            <span>当前经销商</span>
        </h3>
        <p>北京博瑞祥星汽车销售有限公司</p>
    </div>
    <div class="flow-time">
        <h3 class="pub-title">
            <span>人流量分布</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id="flowtimeform">
                  <option>当前</option>
				  <option>昨天</option>
				  <option>上周</option>
				  <option>上月</option>
                  <option>年</option>
                </select>
            </div>
        </h3>
        <div class="form" id="flow-time-form"></div>
    </div>
    <div class="flow-time">
        <h3 class="pub-title">
            <span>历史集客环比</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id="jikehistory">
                  <option >今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>
            </div>
        </h3>
		<div class="form" id="flow-time-form1"></div>
    </div>  
<!--    <div class="flow-time">
        <h3 class="pub-title">
            <span>成交因素比</span>
        </h3>
        <div class="form-border2">
            <h3 class="form-title">
                <p>进店频次占比</p>
            </h3>
            <div class="volume-from" id="volume1-from"></div>
            <h5 class="graph-title">
                <span>一次</span>
                <span>两次</span>     
                <span>三次</span>
                <span>三次以上</span>             
            </h5>
        </div>
        <div class="form-border2">
            <h3 class="form-title">
                <p>进店周期占比</p>
            </h3>
            <div class="volume-from" id="volume2-from"></div>
            <h5 class="graph-title">
                <span>一月内</span>
                <span>三月内</span>     
                <span>五月内</span>             
            </h5>
        </div>
        <div class="form-border2">
            <h3 class="form-title">
                <p>活动参与情况占比</p>
            </h3>
            <div class="volume-from" id="volume3-from"></div>
            <h5 class="graph-title">
                <span>参与</span>
                <span>未参与</span>     
                <span>参与两次以上</span>    
            </h5>
        </div>
    </div>

    <div class="flow-time">
        <h3 class="pub-title">
            <span>成交用户精准画像分布</span>
        </h3>
        <div class="form-border2">
            <div class="volume-from" id="volume4-from"></div>
            <h5 class="graph-title spec">
                <span>商务达人</span>
                <span>运动达人</span>     
                <span>金融人士</span><br />
                <span>公务员</span>  
                <span>专业人士</span>  
                <span>社交达人</span>             
            </h5>
        </div>
    </div>
    <div class="flow-time">
        <h3 class="pub-title">
            <span>活动类型喜好占比</span>
        </h3>
        <div class="form-border2">
            <div class="volume-from" id="volume5-from"></div>
            <h5 class="graph-title">
                <span>车友会</span>
                <span>音乐会</span>     
                <span>户外野营</span>           
            </h5>
        </div>
    </div>
	
    <!--<div class="flow-time">
        <h3 class="pub-title">
            <span>区域人流量分布</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select>
                  <option>当前</option>
				  <option>昨天</option>
				  <option>上周</option>
				  <option>上月</option>
                  <option>年</option>
                </select>
            </div>
        </h3>
        <div class="form2" id="flow-time-form2"></div>
    </div>  
    <div class="flow-time">
        <h3 class="pub-title">
            <span>4S店流量分析（前三名）</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select>
                  <option>当前</option>
				  <option>昨天</option>
				  <option>上周</option>
				  <option>上月</option>
                  <option>年</option>
                </select>
            </div>
        </h3>
        <div class="form-4s" id="flow-time-4sform"></div>
    </div>
    <div class="flow-time">
        <h3 class="pub-title">
            <span>4S店流量极值分析</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select>
                  <option>当前</option>
				  <option>昨天</option>
				  <option>上周</option>
				  <option>上月</option>
                  <option>年</option>
                </select>
            </div>
        </h3>
        <div class="form-4s2" id="flow-time-4sform2"></div>
    </div>  -->


    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('flow-time-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
							type : 'value',
							axisLine: {lineStyle: {color: '#EEEEEE'}},
							splitLine : {show : false,},
							axisLabel : {textStyle : {fontSize : 6,}}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : [
							'9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00',							],							
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barCategoryGap : '70%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'right',
                                        textStyle:{
                                           color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[
'42','43','46','46','58','31','28','26','27','40','29',							
							
							]
                        }
                    ],
					grid : {
                        x : '13%',
                        y : '8%',
                        x2 : '8%',
                        y2 : '15%'
                    }
                };
				$("#flowtimeform").change(function(){
						var flow_time=$("#flowtimeform").children('option:selected').val();
						if(flow_time=="当前"){
							option.yAxis[0].data=['9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00',];
                            option.series[0].data =[
                            '<?php echo $row[2]?>',
                            '<?php echo $row[3]?>',
                            '<?php echo $row[4]?>',
                            '<?php echo $row[5]?>',
                            '<?php echo $row[6]?>',
                            '<?php echo $row[7]?>',
                            '<?php echo $row[8]?>',
                            '<?php echo $row[9]?>',
                            '<?php echo $row[10]?>',
                            '<?php echo $row[11]?>',];
                            myChart.hideLoading();
                            myChart.setOption(option);
						}
						if(flow_time=="昨天"){
							option.yAxis[0].data=['9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00',];
                            option.series[0].data =[
                            '<?php echo $row[12]?>',
                            '<?php echo $row[13]?>',
                            '<?php echo $row[14]?>',
                            '<?php echo $row[15]?>',
                            '<?php echo $row[16]?>',
                            '<?php echo $row[17]?>',
                            '<?php echo $row[18]?>',
                            '<?php echo $row[19]?>',
                            '<?php echo $row[20]?>',
                            '<?php echo $row[21]?>',];
                            myChart.hideLoading();
                            myChart.setOption(option);
						}
						if(flow_time=="上周"){
							option.yAxis[0].data=['周一','周二','周三','周四','周五','周六','周日',];
                            option.series[0].data =[
                            '<?php echo $row[22]?>',
                            '<?php echo $row[23]?>',
                            '<?php echo $row[24]?>',
                            '<?php echo $row[25]?>',
                            '<?php echo $row[26]?>',
                            '<?php echo $row[27]?>',
                            '<?php echo $row[28]?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);							
						}
						if(flow_time=="上月"){
							option.yAxis[0].data=['第一周','第二周','第三周','第四周',];
                            option.series[0].data =[
                            '<?php echo $row[29]?>',
                            '<?php echo $row[30]?>',
                            '<?php echo $row[31]?>',
                            '<?php echo $row[32]?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
						}
						if(flow_time=="年"){
							option.yAxis[0].data=['第一周','第二周','第三周','第四周',];
                            option.series[0].data =[
                            '<?php echo $row[33]?>',
                            '<?php echo $row[34]?>',
                            '<?php echo $row[35]?>',
                            '<?php echo $row[36]?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
						}


				})        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('flow-time-form1')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['今天','昨天'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[104,117]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
         $("#jikehistory").change(function(){
						var flow_time=$("#jikehistory").children('option:selected').val();
						var netid=3;
						if(flow_time=="今天"){
							option.xAxis[0].data = ['今天','昨天'];
							option.series[0].data = [<?php echo $row[37]?>,<?php echo $row[38]?>];
							//console.log(sx);
							option.series[0].barCategoryGap='80%';
							myChart.clear();
							myChart.hideLoading();
							myChart.setOption(option);
						}
						if(flow_time=="本周"){
    							option.xAxis[0].data = ['日','一','二','三','四','五','六'];
                                option.series[0].data = [
                                <?php echo $row[45]?>,
                                <?php echo $row[39]?>,
                                <?php echo $row[40]?>,
                                <?php echo $row[41]?>,
                                <?php echo $row[42]?>,
                                <?php echo $row[43]?>,
                                <?php echo $row[44]?>,];
								option.series[0].barCategoryGap='50%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}
						if(flow_time=="本月"){
							    option.xAxis[0].data = ['第一周','第二周','第三周','第四周',];
                                option.series[0].data = [
                                <?php echo $row[46]?>,
                                <?php echo $row[37]?>,
                                <?php echo $row[48]?>,
                                <?php echo $row[49]?>,];
								
								option.xAxis[0].data = sx;
								option.series[0].data = sy;
								option.series[0].barCategoryGap='60%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}
						if(flow_time=="今年"){
							    option.xAxis[0].data = ['第一季','第二季','第三季','第四季',];
                                option.series[0].data = [
                                <?php echo $row[50]?>,
                                <?php echo $row[51]?>,
                                <?php echo $row[52]?>,
                                <?php echo $row[53]?>,];
								
								option.xAxis[0].data = sx;
								option.series[0].data = sy;
								option.series[0].barCategoryGap='60%';
								//console.log(sx);
								//console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}


				})
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
/*		
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume1-from')); 
                
                var option = {
                        color : ['#434c53',"#c00000",'#6d7578','#b1b6b9'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:25, name:'25%'},
                                    {value:53, name:'53%'},
                                    {value:25, name:'25%'},
                                    {value:7, name:'7%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume2-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:37, name:'37%'},
                                    {value:46, name:'46%'},
                                    {value:17, name:'17%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume3-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:37, name:'37%'},
                                    {value:46, name:'46%'},
                                    {value:17, name:'17%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume4-from')); 
                
                var option = {
                        color : ['#c00000','#000',"#434c53",'#6d7578',"#b1b6b9",'#d5d9d8'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:10, name:'10%'},
                                    {value:20, name:'20%'},
                                    {value:15, name:'15%'},
                                    {value:43, name:'30%'},
                                    {value:12, name:'12%'},
                                    {value:12, name:'13%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume5-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:37, name:'37%'},
                                    {value:46, name:'46%'},
                                    {value:17, name:'17%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
		
        // 使用
/*        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('flow-time-form2')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['北区','南区','西区','东区','东北区','浙江区'],
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[236,197,155,241,221,306]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('flow-time-4sform')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['博瑞祥星','义乌博奥','广东粤奥'],
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '25',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[116,115,114]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('flow-time-4sform2')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['Audi City BeiJing','博瑞祥星'],
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
							axisLine: {lineStyle: {color: '#EEEEEE'}}
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barCategoryGap : '50',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[116,36]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
*/
    </script>
</body>
</html>